<template>
  <el-scrollbar class="menubox">
    <el-menu class="el-menu-vertical-demo" :default-active="state.activeIndex" :collapse="props.collapse" @open="handleOpen"
      @close="handleClose" @select="handleSelect">
      <Menuitem v-for="route in menuList" :key="route.id" :item="route" />
    </el-menu>
  </el-scrollbar>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router';
import Menuitem from './Menuitem.vue';

const props = defineProps({
    collapse: ref(false)
})

const router = useRouter();

const state = reactive({
  activeIndex:'/index'
})

const menuList = reactive([
    {
        id: '001',
        parentId: '0',
        menuName: '首页',
        url: '/index',
        sortNo: 1,
        icon: 'Aim'
    },
    {
        id: '002',
        parentId: '0',
        menuName: '表格',
        url: '/charts',
        sortNo: 4,
        icon: 'ArrowDownBold',
        children: [
            {
                'id': '0021',
                'parentId': '002',
                'menuName': '树状图',
                'url': '/charts/charts1',
                'sortNo': 4,
                'icon': 'ArrowDownBold'
            },
            {
                'id': '0022',
                'parentId': '002',
                'menuName': '饼状图',
                'url': '/charts/charts2',
                'sortNo': 4,
                'icon': 'ArrowDownBold',
                children: [
                    {
                        'id': '00221',
                        'parentId': '0022',
                        'menuName': '测试四级4',
                        'url': '/dashboard',
                        'menuType': 1,
                        'sortNo': 2,
                        'icon': 'Aim'
                    },
                ]
            },
        ]
    },
    {
        'id': '003',
        'parentId': '0',
        'menuName': '测试四级1',
        'url': '/dashboard',
        'menuType': 1,
        'sortNo': 2,
        'icon': 'Aim',
        children: [
            {
                'id': '0031',
                'parentId': '003',
                'menuName': '测试四级2',
                'url': '/dashboard',
                'menuType': 1,
                'sortNo': 2,
                'icon': 'Aim'
            },
        ]
    },
    {
        'id': '004',
        'parentId': '0041',
        'menuName': 'tinymce富文本',
        'url': '/tinymce',
        'menuType': 1,
        'sortNo': 2,
        'icon': 'Aim'
  },
  {
    'id': '005',
    'parentId': '0',
    'menuName': '流程编辑器',
    'url': '/bpmn',
    'menuType': 1,
    'sortNo': 2,
    'icon': 'Aim'
  },
  {
    'id': '006',
    'parentId': '0',
    'menuName': '画板',
    'url': '/drawboard',
    'menuType': 2,
    'sortNo': 3,
    'icon':'Aim'
  },
  {
    'id': '007',
    'parentId': '0',
    'menuName': 'THREE',
    'url': '/three',
    'menuType': 2,
    'sortNo': 3,
    'icon': 'Aim'
  },
  {
    'id': '008',
    'parentId': '0',
    'menuName': '地图下钻',
    'url': '/map',
    'menuType': 2,
    'sortNo': 3,
    'icon': 'Aim'
  }
])

onMounted(() => {
    console.log(menuList, "123")
})

const handleSelect = (key, keyPath) =>{
  console.log(key, keyPath, "选中的菜单")
    state.activeIndex = key
    router.push(key)
}

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
</script>

<style scoped>
.menubox {
    width: 100%;
    height: calc(100% - 60px);
}

/* .menubox:not(.el-menu--collapse){
     width: 200px;
} */

.el-menu-vertical-demo {
    height: 100%;
    border: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}
</style>
